<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="店铺名称">
      <el-input v-model="shopInfo.sname"></el-input>
    </el-form-item>

    <el-form-item label="店铺老板">
      <el-input v-model="shopInfo.sowner"></el-input>
    </el-form-item>

    <el-form-item label="店铺地址">
      <el-input v-model="shopInfo.address"></el-input>
    </el-form-item>

    <el-form-item label="店铺图片">
      <!--<el-input v-model="shopInfo.image"></el-input>-->
      <el-upload
        class="avatar-uploader"
        action="/api/shopUpload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">

        <img v-if="shopInfo.image" :src="shopInfo.image" class="avatar">

        <i v-else class="el-icon-plus avatar-uploader-icon"></i>

      </el-upload>
    </el-form-item>

    <el-form-item label="联系电话">
      <el-input v-model="shopInfo.phone"></el-input>
    </el-form-item>

    <el-form-item label="店铺描述">
      <el-input v-model="shopInfo.sdesc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="insertShops('form')">新增</el-button>
      <el-button @click="exits()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import axios from "axios";

  export default {
    name: "insertShop",
    data() {
      return {
        shopInfo:
          {
            address: '',
            image: '',
            phone: '',
            sdesc: '',
            sname: '',
            sowner: '',
            sid: ''
          },
      }
    },
    methods: {
      insertShops: function (formName) {
        axios.post("/api/insertShop/", this.shopInfo).then(res => {

          if (res.data == "success") {
            this.$router.push("/ShopIndex/");
          } else {
            alert("新增失败!!!!");
          }
        })
      },


      handleAvatarSuccess(res, file) {
        this.shopInfo.image = URL.createObjectURL(file.raw);
      },


      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传商铺图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传商铺图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },

    exits: function () {
      this.$router.push("/ShopIndex/");
    }
  }
</script>

<style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
